/**
 * desc: 【扫码分拣】页面共用弹窗---发货已配齐打印机配置
 */
import React, { useState, useEffect, useMemo } from "react";
import { CommonModal } from "@/views/components/CommonModal";
import { Button, Select, Form, message } from "antd";
import AntdWrapper from "@/components/AntdWrapper";
import usePrint from "@/views/hooks/usePrint";
import styles from "./index.module.less";
import { outboundOrderBatchForce } from "../../service";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
import { CheckCircleOutlined } from "@ant-design/icons";

const PrintModal = ({ deliverType = 4, visible, expressList, outboundNoList, handlePrint, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [shippResult, setShippResult] = useState();
	const [configObj, setConfigObj] = useState({});
	const [list, setList] = useState([])
	const { printOptions, setExpressRelativePrinter, getExpressRelativePrinter } = usePrint();
	const [open, setOpen] = useState(false);
	//获取打印数据推入队列
	const onOk = () => {
		setExpressRelativePrinter(configObj);
		const parm = {
			outboundNos: outboundNoList?.map(x => x.outboundNo),
			isPrint: true,
			deliveryScenario: deliverType,
			// print: printList?.join(",")
		};
		outboundOrderBatchForce(parm).then(res => {
			const { success, data, msg } = res;
			if (success) {
				setList(data.errorSystemList);
		  	setShippResult(data);
				const arr = data?.printList?.map(x => x.systemNo);
				if(arr.length > 0) {
					handlePrint(arr);
					setOpen(true);
				} else {
					message.info('未获取到打印数据');
				}
			}
		});
	};

	// 设置打印机名称
	const handlePrinterName = (item, name) => {
		setConfigObj({
			...configObj,
			[item]: name
		});
	};
	
	const columns = [
		{
			title: "分拣框",
			dataIndex: "sortingBoxName"
		},
		{
			title: "出库单号",
			dataIndex: "outboundNo"
		},
		{
			title: "错误原因",
			dataIndex: "errorMsg"
		}
	];
	useEffect(() => {
		// 从缓存中取出快递和打印机配置数据
		const obj = getExpressRelativePrinter() || {};
		setConfigObj(obj);
		form.setFieldsValue({ ...obj });
	}, []);
	return (
		<CommonModal
			title={{ title: "快递批量打印" }}
			visible={visible}
			onCancel={handleCancel}
			width="456px"
			onOk={onOk}
			okText="打印"
			minHeight={138}
		>
			<Form form={form} name="common-printer-select">
				<Form.Item>
					<div className={styles.goodsNum}>
						<span>打印面单数量：{outboundNoList.length}</span>
					</div>
				</Form.Item>
				{expressList.map(item => (
					<AntdWrapper key={item} label={<div>{item}</div>} style={{ width: "100%" }}>
						<Form.Item name={item}>
							<Select placeholder="请选择打印机" onChange={e => handlePrinterName(item, e)} value={configObj[item]}>
								{printOptions}
							</Select>
						</Form.Item>
					</AntdWrapper>
				))}
			</Form>
			<CommonModal
				title={{ title: "发货结果" }}
				onOk={handleOk}
				onCancel={handleOk}
				open={open}
				minHeight="150px"
				footer={[<Button type='primary' onClick={handleOk}>知道了</Button>]}
			>
				<div style={{ textAlign: "center", marginBottom: 10 }}>
					<CheckCircleOutlined className="common-color10" style={{ fontSize: 80 }} />
				</div>
				<div style={{ textAlign: "center", marginBottom: 20 }}>
					共计:{outboundNoList.length}个，成功:<span className="common-color10">{shippResult?.okSystemList.length}</span>个，失败:
					<span className="common-color9">{shippResult?.errorSystemList.length}</span>个
				</div>
				<CommonTable
					rowKey="key"
					scroll={{ y: `calc(100vh - 250px)` }}
					columns={columns}
					dataSource={list}
					pagination={false}
				/>
			</CommonModal>
		</CommonModal>
	);
};

export default PrintModal;
